<template>
    <teleport to=".top">
        <jdShangxiaHome center="qqq"/>
   </teleport>
   <div class="zuoyou">
        <ul class="left">
            <li v-for="item,index in fenleiList" :key="item" :class="{ active :  index === currentCate }" @click="currentCate = index">{{ item }}</li>
        </ul>
        <ul class="right">
            <li v-for="item in brandList">{{ item }}</li>
        </ul>
   </div>

   <jsShangxiaHomeButtom />
</template>
<script name="jdFenlei" lang="ts" setup>
import jdShangxiaHome from '../../shangxia/home.vue'
import jsShangxiaHomeButtom from '../../shangxia/buttom.vue'
import { getFenleiList,getBrandList } from '../../mode/goods'
import { onMounted,ref,watch } from 'vue';

const currentCate = ref<number>(0)
const fenleiList = ref<string[]>([])
    const brandList = ref<{brand:string}[]>([])

    
const getGoodsList = async ()=>{
    // console.log('aaa'+fenleiList.value[currentCate.value]);
    brandList.value.forEach(item =>{
        console.log(fenleiList.value[currentCate.value],item.brand);
        
    })
    
}

    watch(currentCate,async(newVal)=>{
        // console.log(fenleiList);
        const cate: string = fenleiList.value[newVal]
        const res = await getBrandList(cate || '手机')
        if((res as any).code !== '200') return
        brandList.value =res.data
        // console.log(res);
    getGoodsList()
        
    },{
        immediate :true
    })
    
onMounted(async ()=>{
    const res = await getFenleiList()
    if((res as unknown as any).code !== '200') return
    fenleiList.value =res.data.map((item:string)=> item.trim())
    // console.log(fenleiList.value);
    
})
</script>
<style scoped lang="scss">
    .aaa{
    background-color: white;
    }
    .dl{
        background-color: white;
        border: 0px;
        color: white;
    }
    .van-search{
        background-color: red;
        margin: 0;
        padding: 0;
    }
    .zuoyou{
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        >.left{

            width: 100px;
            overflow: auto;

            >li{
                background-color: #F6F6F6;
                width: 100px;
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 14px;
                &.active{
                    background-color: #fff;
                    color: red;
                }
            }
        }
        >.right{
            flex: 1;
            overflow: auto;
        }
    }
</style>